<template>
  <el-dialog
    :title="dialogPayObj.title"
    append-to-body
    :visible.sync="dialogPayObj.show"
    :close-on-click-modal="false"
    width="1300px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :disabled="dialogPayObj.read"
      v-if="dialogPayObj.show"
      status-icon
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户：" prop="customerList">
            <el-select
              v-model="form.customerId"
              placeholder="请选择"
              style="width:1140px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
            >
              <el-option
                v-for="(data, index) in customerList"
                :key="index"
                :label="data.customerName"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="专利名：" prop="title">
            <el-input
              v-model="form.title"
              style="width:1140px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
              placeholder="请输入专利名"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="专利申请号：" prop="applicationNumber">
            <el-input
              v-model="form.applicationNumber"
              style="width:200px;"
              size="mini"
              :disabled="dialogPayObj.id != ''"
              placeholder="请输入专利申请号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请日：" prop="applicationDatetime">
            <el-date-picker
              v-model="form.applicationDatetime"
              style="width:200px;"
              size="mini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :disabled="dialogPayObj.id != ''"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="缴费信息：" prop="legal">
        <fee-text
          :tableData="tableData"
          :patentManageId="form.id"
          @handleTableDate="handleTableDate"
        >
        </fee-text>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogPayObj.show = false" size="mini">
        取 消
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import timeFormat from "@u/timeFormat";
import feeText from "@c/feeText";
import { batchPatentFeeApi, getCustomerListApi } from "@s/api";
export default {
  name: "dialogPaySetting",
  props: ["dialogPayObj"],
  components: {
    feeText
  },
  data() {
    return {
      form: {
        id: "",
        customerId: "",
        title: "",
        applicationNumber: "",
        applicationDatetime: "",
        feeList: ""
      },
      patentManageId: "",
      tableData: [],
      customerList: []
    };
  },
  methods: {
    // 客户信息
    getCustomerSelect() {
      getCustomerListApi().then(res => {
        this.customerList = res;
      });
    },
    initDialog() {
      if (this.dialogPayObj.id) {
        this.form.id = this.dialogPayObj.id;
        this.form.customerId = this.dialogPayObj.form.customerId;
        this.form.title = this.dialogPayObj.form.title;
        this.form.applicationNumber = this.dialogPayObj.form.applicationNumber;
        this.form.applicationDatetime = this.dialogPayObj.form.applicationDatetime;
        if (
          this.dialogPayObj.form.feeList &&
          this.dialogPayObj.form.feeList.length > 0
        ) {
          this.tableData = JSON.parse(
            JSON.stringify(this.dialogPayObj.form.feeList)
          );
          for (var i = 0; i < this.tableData.length; i++) {
            var item = this.tableData[i];
            item.feeAmount = timeFormat.formatFloat(item.feeAmount / 100, 2);
            if (item.overdueAmount) {
              item.overdueAmount = timeFormat.formatFloat(
                item.overdueAmount / 100,
                2
              );
            }
            if (item.agentAmount) {
              item.agentAmount = timeFormat.formatFloat(
                item.agentAmount / 100,
                2
              );
            }
            if (item.otherAmount) {
              item.otherAmount = timeFormat.formatFloat(
                item.otherAmount / 100,
                2
              );
            }
          }
        } else {
          this.tableData = [];
        }
      } else {
        this.form.id = "";
        this.form.customerId = "";
        this.form.title = "";
        this.form.applicationNumber = "";
        this.form.applicationDatetime = "";
        this.tableData = [];
      }
    },
    handleTableDate() {},
    sub: _debounce(function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.dialogPayObj.id) {
            this.updateSub();
          }
        }
      });
    }),
    updateSub() {
      let datelist = JSON.parse(JSON.stringify(this.tableData));
      // 数据校验
      for (var i = 0; i < datelist.length; i++) {
        var item = datelist[i];
        if (!item.feeType || !item.feeAmount) {
          this.$message({
            type: "warning",
            message: "请输入缴费种类、应缴金额！"
          });
          return;
        }
        if (item.status == "0" && !item.expiryDate) {
          this.$message({
            type: "warning",
            message: "请输入缴费截止日！"
          });
          return;
        }
        if (!this.validateNumber(item.feeAmount, false)) {
          this.$message({
            type: "warning",
            message: "应缴金额(元)请输入正数的数字或最多保留两位小数！"
          });
          return;
        }
        if (
          !this.validateNumber(item.overdueAmount, true) ||
          !this.validateNumber(item.agentAmount, true) ||
          !this.validateNumber(item.otherAmount, true)
        ) {
          this.$message({
            type: "warning",
            message: "金额信息(元)请输入数字或最多保留两位小数！"
          });
          return;
        }
        // 缴费种类重复校验
        for (var j = i + 1; j < datelist.length; j++) {
          var itemNameCheck = datelist[j];
          if (itemNameCheck.feeType == item.feeType) {
            this.$message({
              type: "warning",
              message: "同一专利中不能输入重复缴费种类的记录！"
            });
            return;
          }
        }
      }
      for (var k = 0; k < datelist.length; k++) {
        var itemChange = datelist[k];
        // 数据转换
        itemChange.feeAmount = timeFormat.yuanToCent(itemChange.feeAmount);
        if (itemChange.overdueAmount) {
          itemChange.overdueAmount = timeFormat.yuanToCent(
            itemChange.overdueAmount
          );
        }
        if (itemChange.agentAmount) {
          itemChange.agentAmount = timeFormat.yuanToCent(
            itemChange.agentAmount
          );
        }
        if (itemChange.otherAmount) {
          itemChange.otherAmount = timeFormat.yuanToCent(
            itemChange.otherAmount
          );
        }
      }
      this.form.feeList = datelist;
      let json = JSON.parse(JSON.stringify(this.form));
      batchPatentFeeApi(json).then(() => {
        this.dialogPayObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "缴费设定成功！"
        });
      });
    },
    /*限制  正数且最多保留两位小数 */
    validateNumber(value, isZero) {
      var reg = /^(\+?[1-9][0-9]*|\d+\.\d{1,2})$/;
      if (isZero && value == 0) {
        return true;
      }
      if (value && !reg.test(value)) {
        return false;
      } else {
        return true;
      }
    },
    selectIsAgentOption(val) {
      if (val == "0") {
        this.agentStatus = true;
      } else {
        this.agentStatus = false;
      }
    },
    selectRoleOption(val) {
      // 初始选择值
      // 是否有活动或者楼层的选择
      // 如果选择为
      let arr = this.RoleSelectList;
      arr.forEach(item => {
        if (item.roleId == val) {
          this.selectRoleOptionLabel(item.name);
        }
      });
    }
  },
  watch: {
    "dialogPayObj.show"(val) {
      if (val) {
        this.getCustomerSelect();
        this.initDialog();
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
